Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
LineIcons – 超過 2000+ 個線形圖標庫，專為設計師與開發人員設計的圖標 Icons 免費下載
LineIcons 是一個面向設計師與開發人員而設計的免費圖標 Icons 網站，在網站當中所提供的所有圖標都非常適合用在 Web、Android 或 iOS 應用程式當中，裡面包含了 2000+ 個基本圖標 Icons，幾乎能夠涵蓋所有你設計開發時所會需要使用到的所有圖示。
用 AI 摘要這篇文章：
LineIcons 是一套免費開源的線形圖標庫，截至 2026 年 5 月提供 2,298+ 個免費圖標（Pro 版本合計 28,000+），支援 SVG、React、Vue、Icon Font 等 9 種格式，MIT 授權可商用。如果你需要一套風格統一、格式齊全的現代線形圖標，LineIcons 是目前免費方案中最完整的選擇之一。
目錄
LineIcons 是什麼？免費圖標庫的核心特色
LineIcons 是由 Lineicons 團隊維護的開源圖標庫，目前最新版本為 V5.1。它最大的特色是專注於線形（outlined）風格的 UI 圖標，同時也提供 solid、duotone、bulk 等多種變體，涵蓋 60+ 個分類，從箭頭、商務、通訊到品牌 Logo 都有收錄。
跟很多圖標庫不同，LineIcons 從早期就專注於線形這個單一風格，後續版本才逐步加入更多變體。這種策略讓整套圖標的設計語言高度一致，線條粗細、圓角比例與視覺重量都經過統一規範。對於追求極簡風格的 WordPress 佈景主題、SaaS 產品或科技網站，這種一致性是選擇圖標庫時最重要的判斷標準。
LineIcons 提供的格式非常齊全：
- SVG 向量檔：適合直接嵌入 HTML 或用於向量編輯軟體，縮放不失真，是目前網頁設計的主流格式。
- Web Font 字型檔：透過 CSS class 呼叫圖標，類似 Font Awesome 的用法，對習慣字型圖標的開發者來說非常方便。
- React / Vue / Svelte 元件：V5 開始支援直接匯出為前端框架元件格式，省去手動轉換的步驟。
- PNG / WEBP / Base64：提供點陣圖和編碼格式，適合不需要向量編輯的使用場景。
- Figma 外掛：安裝 Figma Plugin 後可直接在設計稿中插入圖標，不需要逐個下載 SVG。
LineIcons 免費與 Pro 授權方案比較
LineIcons 分為免費方案（Basic Free）和付費方案（Pro）。免費方案採 MIT 開源授權，Pro 方案則提供商業授權與更多圖標。以下是根據官方定價頁面整理的比較（截至 2026 年 5 月）：
| 比較項目 | Basic Free（免費） | Pro（付費） |
|---|---|---|
| 圖標數量 | 2,298+ 個 | 28,002+ 個全部圖標 |
| 圖標風格變體 | outlined、solid、duotone、bulk | 14 種變體 |
| 格式 | SVG、React、Vue、HTML、PNG 等 | 同左 + Figma 原始檔 |
| 商用授權 | MIT（可商用） | 商業授權（可商用） |
| Pro CDN | 否 | 是 |
| Figma 外掛 | 是 | 是 |
| 價格 | 免費 | Starter $59 / Business $129 / Extended $799（終身授權） |
判斷建議：如果你只需要基本常用的 UI 圖標，免費方案的 2,298+ 個圖標已經非常夠用，而且 MIT 授權完全允許商用。Pro 方案的價值在於解鎖全部 28,000+ 圖標、取得 Pro CDN 與 Figma 原始設計檔。如果你是接案設計師或團隊需要大量品牌 Logo 和特殊圖標，Business 方案 $129 終身授權（一次付款、無續約費用）是性價比最高的選擇。
如何下載與使用 LineIcons 圖標
下載和使用 LineIcons 有三種方式，根據你的需求選擇：
方式一：批量下載全部免費圖標
進入 LineIcons 官方網站，點選首頁的「Download Now」按鈕，一次下載全部 2,298+ 個免費圖標。下載的 ZIP 壓縮檔內會依格式分類，包含 SVG 檔案、Web Font 檔案（CSS、WOFF、TTF）以及各框架元件格式。
方式二：瀏覽與搜尋單一圖標
如果你只需要幾個圖標，點選首頁的「View All Icons」進入圖標瀏覽頁面。左側邊欄列出所有分類（Arrows、Business、Communication、Design、Media、Weather 等），也提供關鍵字搜尋功能。注意圖標右上角標示「PRO」的圖標需要 Pro 方案才能下載。
方式三：單獨下載 SVG 或複製程式碼
每個圖標下方提供多種操作：下載 SVG、複製 CSS class 名稱（例如 lni lni-home）、複製 React/Vue 元件程式碼。直接貼到你的專案中即可使用。
Web Font 圖標嵌入教學：在 HTML 與 WordPress 中使用
在 HTML 專案中載入
最簡單的方式是使用官方 CDN，在 HTML 的 <head> 區段加入：
<link rel="stylesheet" href="https://cdn.lineicons.com/4.0/lineicons.css">
使用 CDN 的好處是圖標字型檔由全球分散式伺服器提供，載入速度通常比放在自己的主機上更快。如果你的網站搭配了 Cloudflare CDN 或其他快取服務，整體效能還能進一步提升。這對於追求網站速度最佳化的開發者來說是最省事的方案。
如果你希望完全掌控資源載入，也可以將 Web Font 檔案上傳到自己的主機。從下載的 ZIP 壓縮檔中找到 Web Font 資料夾，將 CSS 和字型檔案（WOFF、TTF 等）一起上傳到網站目錄，然後在 <head> 中引用：
<link href="your-project-dir/font-css/LineIcons.css" rel="stylesheet">
這種方式不依賴外部 CDN，但需要自己處理快取設定和版本更新。如果你使用的是 Bluehost 或 A2 Hosting 等虛擬主機，確認主機有啟用 GZIP 壓縮可以減少字型檔案的傳輸量。
載入後在 HTML 中顯示圖標
引入 CSS 後，使用 <i> 標籤加上 CSS class 即可顯示圖標。所有 class 名稱都以 lni lni- 開頭：
<i class="lni lni-home"></i>
也可以透過 CSS 調整大小和顏色：
.icon-large { font-size: 48px; color: #333; }
在 WordPress 中使用
在 WordPress 網站中使用 LineIcons，最推薦的做法是透過佈景主題的 functions.php 引入 CDN 資源。使用 wp_enqueue_style 函式載入，符合 WordPress 最佳實踐，也能搭配各種快取外掛正確處理資源載入順序：
function enqueue_lineicons() { wp_enqueue_style('lineicons', 'https://cdn.lineicons.com/4.0/lineicons.css'); } add_action('wp_enqueue_scripts', 'enqueue_lineicons');
載入 CSS 後，在 Gutenberg 編輯器中加入「自訂 HTML」區塊，輸入 <i class="lni lni-home"></i> 即可顯示圖標。如果你使用 Elementor 等頁面編輯器，同樣在 HTML 元件中插入相同語法。更進階的用法是在佈景主題範本檔案中直接加入圖標，用來取代導航選單的文字按鈕或作為分類標記。
使用 Web Font 圖標時，效能需要注意幾個面向：優先使用 CDN 載入、設定適當的快取標頭、搭配 GZIP 壓縮減少檔案傳輸量。另一個有效做法是只載入實際使用的圖標子集，透過 IcoMoon App 從 LineIcons 的 SVG 檔案中挑選需要的圖標，產生精簡版自訂字型檔，大幅減少檔案大小。
LineIcons 與其他免費圖標庫比較
選擇圖標庫最重要的考量不是數量最多，而是風格是否符合你的專案需求。以下是主流免費圖標庫的功能比較：
| 圖標庫 | 免費圖標數 | 授權 | 格式 | 風格 |
|---|---|---|---|---|
| LineIcons | 2,298+（Pro 28,002+） | MIT | SVG、Font、React、Vue 等 9 種 | 線形為主，4 種變體 |
| Feather Icons | 287+ | MIT | SVG | 線形極簡 |
| Heroicons | 300+ | MIT | SVG | 線形/實心 |
| Flaticon | 數萬+ | 需署名 | PNG、SVG、EPS | 多元風格 |
| Remix Icon | 2,000+ | Apache 2.0 | SVG、Web Font | 線形/實心 |
| Ionicons | 1,300+ | MIT | SVG、Web Font | 線形/實心/銳利 |
| Tabler Icons | 558+ | MIT | SVG | 線形 |
| iconmonstr | 4,496+ | CC0 | SVG、PNG | 線形為主 |
各圖標庫的定位差異明顯：Feather Icons 和 Heroicons 適合追求極簡美學的專案，圖標數量少但每個都經過精心打磨。Icons8 和 Flaticon 提供大量且多元風格的選擇，適合需要豐富變化的設計師。Remix Icon 和 Ionicons 在數量和格式支援上都很完整，適合需要多種風格變體的專案。
LineIcons 的定位在於提供一套風格高度統一、格式支援最全面的線形圖標，同時免費方案就有 2,298+ 個圖標，數量在同類型圖標庫中算非常充裕。對於 SaaS 產品、科技部落格或現代風格的網站來說，是最實用的選擇之一。
如果你需要更多特殊風格的圖標，IconPark（位元組跳動開發，1,287+ 個圖標，支援線上客製化）、Simple Icons（知名品牌 SVG 圖標，可免費商用）和 CSS.GG（700+ 開源圖標）都是值得收藏的補充資源。開發者角度來看，Octicons（GitHub 官方）和 Radix Icons 也是優秀的開源選擇。
適合誰使用 LineIcons？限制與替代方案
適合使用 LineIcons 的情境：
- 正在開發 SaaS 產品或科技網站，需要風格統一的線形 UI 圖標。
- 使用 WordPress 架站，想在不拖慢網站速度的前提下加入圖標裝飾。
- 前端開發者需要 SVG、React、Vue 等多種格式的圖標元件。
- 設計師使用 Figma，想透過外掛快速插入統一風格的圖標。
不適合或需要注意的情境：
- 你需要多種風格（填充、3D、手繪、動畫）混搭的圖標，LineIcons 以線形為主，風格變體有限。
- 你需要大量特定品牌 Logo 圖標，免費方案的品牌圖標數量有限，Pro 方案才涵蓋更完整的品牌庫。
- 你的專案完全不允許外部 CDN 依賴，使用 Web Font 格式時需要自行託管字型檔案並處理快取與版本管理。
使用圖標的幾個實務建議：
同一個專案中盡量不要混用不同圖標庫的圖標。每個圖標庫都有獨特的設計語言，混用會讓介面看起來不協調。圖標尺寸建議遵循 4px 或 8px 倍數原則（16px、20px、24px、32px、48px），周圍保留適當留白。功能性圖標（例如垃圾桶代表刪除）必須加上 aria-label 提供替代文字，裝飾性圖標則加上 aria-hidden="true"，這對網站 SEO 和無障礙設計都有幫助。
如果需要壓縮 SVG 檔案，可以使用 SVGOMG 移除不必要的 metadata。需要圖片格式轉換，可以參考免費線上圖片格式轉換工具。若需要更多免費圖標資源，SVG Repo 收錄了 30 萬+ 個免費 SVG 圖標，FindIcons 則是全球最大的圖示搜尋引擎，可以一次搜尋多個圖標庫。
LineIcons 常見問題 FAQ
LineIcons 免費版可以用於商業用途嗎？
可以。LineIcons 免費方案採 MIT 開源授權，允許商業用途，無需署名。這是 MIT 授權的基本權利。
LineIcons 支援哪些圖標格式？
LineIcons 支援 9 種格式：SVG、PNG、WEBP、React（JSX）、Vue、Svelte、HTML、Icon Font、Base64。另外也提供 Figma 外掛直接使用。免費和 Pro 方案都涵蓋這些格式。
LineIcons 和 Font Awesome 哪個比較好？
兩者各有優勢。Font Awesome 提供更多圖標數量和更成熟的生態系統，適合需要大量圖標且重視社群支援的專案。LineIcons 則專注於線形風格，圖標設計更統一、更現代，而且免費方案就有 2,298+ 個圖標和 4 種風格變體。如果你只需要線形圖標且重視風格一致性，LineIcons 是更輕量的選擇。
LineIcons Pro 的價格是多少？
截至 2026 年 5 月，LineIcons Pro 提供三種終身授權方案（一次付款、無續約費用）：Starter $59（1 人授權）、Business $129（3 人授權）、Extended $799（5 人授權 + 無限終端使用者）。所有方案都享 7 天退款保證。建議前往官方網站確認最新定價。
LineIcons 圖標可以在 React 或 Vue 專案中使用嗎？
可以。LineIcons V5 直接提供 React（JSX/TSX）和 Vue 格式的圖標元件，可以像一般元件一樣匯入使用。SVG 格式也可以在任何前端框架中直接嵌入。Web Font 格式則透過 CSS class 在所有框架中通用。
如果你正在尋找更多免費設計資源，TechMoon 上有大量相關介紹，從免費圖庫、免費圖庫懶人包到線上設計工具都有完整收錄。
